<template>
  <div class="wx_content">
    <el-row>
      <el-col :span="8"><el-input v-model="wd"></el-input></el-col>
      <el-col :span="3" style="margin-left:10px"><el-button type="primary" @click="submitSearch">搜索</el-button></el-col>
    </el-row>
    <el-table v-loading="tbLoading" element-loading-text="拼命加载中" :data="newsList.list" stripe class="table">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="消息类型" width="400">
        <template slot-scope="scope">
          <div>
            多图文({{scope.row.newsList.length}})<el-tag>部分可见</el-tag>
          </div>
          <div v-for="item,n in scope.row.newsList" class="newsItem">
            <img :src="baseUrl + '/content/source/id/'+item.sourceId" alt="" class="preview">
            <p class="content">[图文{{n+1}}] {{item.title}}</p>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发送状态"></el-table-column>
      <el-table-column label="发送设置"></el-table-column>
      <el-table-column label="操作" width="200"  class-name="is-center">
        <template slot-scope='scope'>
          <el-button type='text' @click="handleEdit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import config from '@/config/env'
  export default {
    data () {
      return {
        wd: '',
        page: 1,
        size: 10,
        tbLoading: false
      }
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        newsList: state => state.contentManage.wxNewsList
      }),
      baseUrl () {
        return config.baseUrl
      }
    },
    methods: {
      ...mapActions(['getWxNewsList']),
      initPage () {
        this.submitSearch()
      },
      // 搜索
      submitSearch () {
        this.getWxNewsList({
          wd: this.wd,
          page: this.page,
          size: this.size
        })
      },
      // 编辑
      handleEdit (id) {
        this.$router.push({
          name: 'EditWxContent',
          params: {id: id}
        })
      }
    }
  }
</script>
<style lang="scss">
  .wx_content{
    .el-row{margin-bottom:15px;}
    .el-table td{padding:5px 0;vertical-align:top;}
    .el-tag{margin-left:10px;height:18px;line-height:16px;}
    .newsItem{
      &{margin-top:10px;overflow:hidden;}
      .preview{float:left;width:100px;height:100px;}
      .content{margin-left:110px;}
    }
  }
</style>
